<template>
  <view class="job-application">
    <!-- 自定义导航栏 -->
    <u-navbar
      title="求职报名"
      :border="false"
      bgColor="#FFFFFF"
      titleColor="#333333"
      :titleStyle="{ fontSize: '36rpx', fontWeight: '500' }"
      leftIcon="arrow-left"
      @leftClick="goBack"
	  placeholder
    ></u-navbar>
         <!-- 步骤指示器 -->
     <view class="step-indicator">
       <view class="step-item" :class="{ active: currentStep >= 1 }">
         <view class="step-number">1</view>
         <text class="step-text">{{hasExistingSignup?'确认更换企业信息':'确认身份信息'}}</text>
       </view>
       <view class="step-line" :class="{ active: currentStep >= 2 }"></view>
       <view class="step-item" :class="{ active: currentStep >= 2 }">
         <view class="step-number">2</view>
         <text class="step-text">确认到厂方式</text>
       </view>
     </view>
    
    <!-- 第一步：身份信息确认 -->
    <view v-if="currentStep === 1">
      <!-- 岗位详情卡片 -->
      <view class="job-details-card" v-if="!hasExistingSignup">
        <view class="card-header">
          <view class="card-title">
            <img class="card-title-img" src="@/static/index/job-details-title.png">
          </view>
          <view class="view-details" @click="viewJobDetails">
            <text class="view-text">查看详情</text>
            <u-icon name="arrow-right" size="16" color="#999999"></u-icon>
          </view>
        </view>
        <view class="job-info-list">
          <view class="info-item">
            <text class="info-label">报名企业</text>
            <text class="info-value">{{ jobInfo.company || jobInfo.customerName || '东莞高步电子厂' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">岗位</text>
            <text class="info-value">{{ jobInfo.position || jobInfo.title || '不体检 普通工衣' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">用工模式</text>
            <text class="info-value">{{ jobInfo.employmentModel || '派遣工' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">工价</text>
            <text class="info-value">{{ jobInfo.salary || '22元/时' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">地址</text>
            <text class="info-value">{{ jobInfo.address || '—' }}</text>
          </view>
        </view>
      </view>
      
      <!-- 存在已报名信息时：展示原/新岗位对比确认 -->
      <view class="change-confirm-section" v-if="hasExistingSignup">
        <view class="change-title-row">
          <view class="change-badge original">原</view>
          <text class="change-title">原报名企业岗位信息</text>
        </view>
        <view class="change-card">
          <view class="change-item">
            <text class="change-label">企业</text>
            <text class="change-value">{{ previousSignup.company || '—' }}</text>
          </view>
          <view class="change-item">
            <text class="change-label">岗位</text>
            <text class="change-value">{{ previousSignup.position || '—' }}</text>
          </view>
          <view class="change-item">
            <text class="change-label">工价</text>
            <text class="change-value">{{ previousSignup.salary || '—' }}</text>
          </view>
          <view class="change-item">
            <text class="change-label">地址</text>
            <text class="change-value">{{ previousSignup.address || '—' }}</text>
          </view>
        </view>

        <view class="change-title-row">
          <view class="change-badge change">变</view>
          <text class="change-title">变更后企业岗位信息</text>
        </view>
        <view class="change-card">
          <view class="change-item">
            <text class="change-label">企业</text>
            <text class="change-value">{{ jobInfo.company || jobInfo.customerName || '—' }}</text>
          </view>
          <view class="change-item">
            <text class="change-label">岗位</text>
            <text class="change-value">{{ jobInfo.position || jobInfo.title || '—' }}</text>
          </view>
          <view class="change-item">
            <text class="change-label">工价</text>
            <text class="change-value">{{ jobInfo.salary || '—' }}</text>
          </view>
          <view class="change-item">
            <text class="change-label">地址</text>
            <text class="change-value">{{ jobInfo.address || '—' }}</text>
          </view>
        </view>
      </view>

      <!-- 否则：展示个人信息确认（来自缓存） -->
      <view class="phone-section" v-else>
        <view class="section-title">
          <text class="required">*</text>
          <text class="title-text">个人信息确认</text>
        </view>
        <view class="phone-form">
          <view class="form-item">
            <text class="form-label">姓名</text>
            <u-input
              v-model="userRealName"
              placeholder="姓名"
              :disabled="true"
              :customStyle="{ backgroundColor: '#F5F5F5' }"
            ></u-input>
          </view>
          <view class="form-item">
            <text class="form-label">身份证号</text>
            <u-input
              v-model="userIdNumber"
              placeholder="身份证号"
              :disabled="true"
              :customStyle="{ backgroundColor: '#F5F5F5' }"
            ></u-input>
          </view>
          <view class="form-item">
            <text class="form-label">手机号码</text>
            <u-input
              v-model="phoneNumber"
              placeholder="手机号码"
              :disabled="true"
              :customStyle="{ backgroundColor: '#F5F5F5' }"
            ></u-input>
          </view>
        </view>
      </view>
    </view>
    
         <!-- 第二步：您的地理位置 -->
     <view v-if="currentStep === 2">
		 <view class="company-info-title">
			<view>已为您智能推荐到厂方式：</view>
			<view class="company-info-title-flex">
				<img style=" width:70rpx;height:60rpx" src="@/static/icon/car.png">
				<view>
					<view class="company-info-title-tag">自行到厂
						<!-- <view class="custom-tag">标签</view> -->
						<!-- <view class="custom-tag">可报销</view> -->
					</view>
					<view>自行前往企业指定面试集合点进行面试</view>
				</view>
			</view>
		 </view>
                       <!-- 企业及时间信息卡片 -->
          <view class="company-time-info-card">
            <view class="timeline-container">
                             <!-- 左侧步骤条 -->
               <view class="timeline-bar">
                 <view class="timeline-line"></view>
                 <view class="timeline-dot green-dot"></view>
                 <view class="timeline-dot orange-dot"></view>
               </view>
              
              <!-- 右侧内容 -->
              <view class="timeline-content">
                                 <!-- 第一个圆点对应的内容：企业信息 -->
                 <view class="timeline-item">
                   <view class="company-info">
                     <text class="company-label">您面试的企业:</text>
                     <text class="company-name">{{jobInfo.company || jobInfo.customerName || '—'}}</text>
                   </view>
                   <text class="company-address">{{ jobInfo.detailAddress || jobInfo.address ||  ''}}</text>
                   
                   <!-- 驻厂客服接待时间 -->
                   <view class="service-time-item">
                     <text class="time-label">驻厂客服接待时间:</text>
                     <text class="time-value">12:30至14:00</text>
                   </view>
                   
                   <!-- 预估到厂花费时间 -->
                   <!-- <view class="time-section">
                     <text class="time-label">预估到厂花费时间:</text>
                     <view class="time-details">
                       <text class="time-item">1小时11分+(驾车时间)</text>
                       <text class="time-item">4小时0分+(公共交通)</text>
                     </view>
                   </view> -->
                 </view>
                 
                 <!-- 第二个圆点对应的内容：地理位置 -->
                 <view class="timeline-item">
                   <!-- 地理位置信息 -->
                   <text class="location-label">您当前地理位置:</text>
                   
                   <!-- 地理位置授权按钮 -->
                   <view v-if="!showMap" class="location-auth-button" @click="getLocation">
                     <u-icon name="map" size="20" color="var(--u-primary)"></u-icon>
                     <text class="auth-text">点击授权获取最新地理位置</text>
                   </view>
				   <!-- 地图组件 - 只在获取位置后显示 -->
				   <map 
				     v-if="showMap"
				     :longitude="userLocation.longitude"
				     :latitude="userLocation.latitude"
				     :markers="mapMarkers"
				     :polyline="mapPolyline"
				     :scale="12"
				     class="location-map"
				     show-location
				     @tap="openNavigation"
				   ></map>
				   
				   <!-- 导航提示 -->
				   <view v-if="showMap" class="navigation-tip">
				     <text class="tip-text">点击打开地图导航</text>
				   </view>
                 </view>
              </view>
            </view>
          </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-button">
        <u-checkbox-group
          v-if="currentStep === 1"
          v-model="agreementsStep1"
          placement="column"
        >
          <view class="agreement-item">
            <u-checkbox
              name="agreeInfo"
              shape="circle"
              activeColor="var(--u-primary)"
              :label="'同意并授权以上身份信息用于身份验证及求职'"
              labelColor="#666666"
            />
          </view>
          <view class="agreement-item">
            <u-checkbox
              name="agreeJob"
              shape="circle"
              activeColor="var(--u-primary)"
              :label="'我已阅读并认同该岗位信息及招聘要求'"
              labelColor="#666666"
            />
          </view>
        </u-checkbox-group>
      <u-button
        v-if="currentStep === 1"
        :text="step1ButtonText"
        type="primary"
        size="large"
        @click="nextStep" 
        :disabled="!canProceed"
        :customStyle="{ width: '100%', backgroundColor: 'var(--u-primary)', borderColor: 'var(--u-primary)' }"
      ></u-button>
             <view v-else class="two-button-container">
         <u-button
           text="上一步"
           type="default"
           size="large"
           @click="goBack"
           :customStyle="{ flex: 1, marginRight: '10rpx', backgroundColor: '#FFFFFF', borderColor: '#DDDDDD', color: '#666666' }"
         ></u-button>
         <u-button
           text="提交报名"
           type="primary"
           size="large"
           @click="submitApplication"
           :customStyle="{ flex: 1, marginLeft: '10rpx', backgroundColor: 'var(--u-primary)', borderColor: 'var(--u-primary)' }"
         ></u-button>
       </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { jobApi } from '@/api'
import { applicationApi as applicationApiHelper } from '@/api/api-helper.js'
import { userStore } from '@/stores/userStore'

const currentStep = ref(1)
const arrivalMethod = ref('shuttle') // 默认专车接送
const idCardFront = ref('')
const idCardBack = ref('')
const phoneNumber = ref('')
const userRealName = ref('')
const userIdNumber = ref('')
const agreementsStep1 = ref<string[]>(['agreeInfo', 'agreeJob'])
const hasExistingSignup = ref(false)
const previousSignup = ref<any>({})
const step1ButtonText = computed(() => hasExistingSignup.value ? '确认变更信息并下一步' : '下一步')

// 地图相关数据
const showMap = ref(false)
const userLocation = ref({
	longitude: 0,
	latitude: 0
})
const mapMarkers = ref([])
const mapPolyline = ref([])

// 岗位信息
const jobInfo = ref<any>({
	id: '',
	title: '',
	salary: '',
	company: '',
	position: '',
	employmentModel: '',
	useWorkType:'',
	customerName:'',
	hireRecruitUseId:'',
	hireRecruitUseEntryId:'',
	address:'',
	detailAddress:'',
})

onMounted(async () => {
	// 获取页面参数
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const options = currentPage.options || {}
	
	// 获取分享者的openId
	const shareOpenId = options.shareOpenId || ''
	console.log('获取到的shareOpenId:', shareOpenId)
	
	jobInfo.value = {
		id: options.jobId || '',
		customerName: decodeURIComponent(options.customerName || ''),
		title: decodeURIComponent(options.customerName || ''),
		salary: decodeURIComponent(options.jobSalary || ''),
		company: decodeURIComponent(options.customerName || ''),
		position: decodeURIComponent(options.jobTitle || '') + ' / '+ decodeURIComponent(options.positionName || ''),
		employmentModel: decodeURIComponent(options.useWorkType || ''),
		hireRecruitUseId: decodeURIComponent(options.hireRecruitUseId || ''),
		hireRecruitUseEntryId: decodeURIComponent(options.hireRecruitUseEntryId || ''),
		address: decodeURIComponent(options.address || ''),
		detailAddress: decodeURIComponent(options.detailAddress || ''),
		shareOpenId: shareOpenId, // 保存分享者的openId
	}
    // 讀取用戶緩存信息
    const info = userStore.userInfo.value as any
    if (info) {
        userRealName.value = info.realName || ''
        userIdNumber.value = info.idNumber || ''
        phoneNumber.value = info.phone || ''
    }

    // 调用接口判断是否能报名并返回岗位信息
    try {
        const openId = userStore.getOpenId()
        if (openId && jobInfo.value.hireRecruitUseId && jobInfo.value.hireRecruitUseEntryId) {
            const today = new Date().toISOString().split('T')[0] // 格式：2025-01-20
            
            const result = await applicationApiHelper.getChangeLaborSignMessage({
                openId: openId,
                date: today,
                recruitUseId: jobInfo.value.hireRecruitUseId,
                recruitUseEntryId: jobInfo.value.hireRecruitUseEntryId
            })
            
            if (result && result.code === 200 && result.data) {
                // 根据接口返回的changeSignup字段判断是否展示替换岗位信息
                hasExistingSignup.value = result.data.changeSignup || false
                
                // 如果已有报名，获取原岗位信息（originally字段）
                if (hasExistingSignup.value && result.data.originally) {
                    previousSignup.value = {
                        company: result.data.originally.company || result.data.originally.customerName || '',
                        position: result.data.originally.hireName + ' / ' + result.data.originally.positionName,
                        salary: result.data.originally.salary || result.data.originally.workPrice || '',
                        address: result.data.originally.address || '',
                        hireRecruitUseId: result.data.originally.hireRecruitUseId || '',
                        hireRecruitUseEntryId: result.data.originally.hireRecruitUseEntryId || '',
                        createdAt: result.data.originally.createdAt || Date.now()
                    }
                }
            }
        }
    } catch (error) {
        console.error('获取报名状态失败:', error)
        // 如果接口调用失败，回退到本地缓存检查
        try {
            const last = uni.getStorageSync('last_signup')
            if (last && last.hireRecruitUseEntryId) {
                hasExistingSignup.value = true
                previousSignup.value = last
            }
        } catch (e) {
            hasExistingSignup.value = false
        }
    }
})

const canProceed = computed(() => {
    const agreedAll = agreementsStep1.value.includes('agreeInfo') && agreementsStep1.value.includes('agreeJob')
    return !!(phoneNumber.value && agreedAll)
})

const goBack = () => {
	if (currentStep.value === 2) {
		currentStep.value = 1
	} else {
		uni.navigateBack()
	}
}

const toggleArrivalMethod = () => {
	arrivalMethod.value = arrivalMethod.value === 'shuttle' ? 'self' : 'shuttle'
}

const uploadIdCardFront = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			idCardFront.value = res.tempFilePaths[0]
		}
	})
}

const uploadIdCardBack = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			idCardBack.value = res.tempFilePaths[0]
		}
	})
}

const getVerificationCode = () => {
	if (countdown.value > 0) return
	
	countdown.value = 60
	const timer = setInterval(() => {
		countdown.value--
		if (countdown.value <= 0) {
			clearInterval(timer)
		}
	}, 1000)
	
	uni.showToast({
		title: '验证码已发送',
		icon: 'success'
	})
}

const viewJobDetails = () => {
	uni.navigateTo({
		url: `/pages/job-details/job-details?jobId=${jobInfo.value.id}`
	})
}

const nextStep = () => {
	if (canProceed.value) {
		currentStep.value = 2
	}
}

const submitApplication = () => {
	uni.showLoading({
		title: '提交中...'
	})
	applicationApiHelper.createLaborSignup({
		openId: userStore.getOpenId(),
		recruitUseId: jobInfo.value.hireRecruitUseId,
		recruitUseEntryId:jobInfo.value.hireRecruitUseEntryId,
		originallyRecruitUseId: previousSignup.value?.hireRecruitUseId || '',
		originallyRecruitUseEntryId: previousSignup.value?.hireRecruitUseEntryId || '',
		hireOpenId: jobInfo.value.shareOpenId || '' // 添加分享者的openId
	}).then((result: { code: number })=>{
		console.log(result)
		uni.hideLoading()
		if (result && result.code === 200) {
			// 更新用户入职状态为已报名
			userStore.updateEmploymentStatus('已报名')
			// 保存最近一次报名的基础信息到本地缓存
			try {
				const signupInfo = {
					company: jobInfo.value.company || jobInfo.value.customerName || '',
					position: jobInfo.value.position || '',
					salary: jobInfo.value.salary || '',
					arrivalMethod: '自行到厂',
					hireRecruitUseId: jobInfo.value.hireRecruitUseId || '',
					hireRecruitUseEntryId: jobInfo.value.hireRecruitUseEntryId || '',
					createdAt: Date.now()
				}
				uni.setStorageSync('last_signup', signupInfo)
			} catch (e) {
				console.warn('保存报名信息失败', e)
			}
			uni.showToast({
				title: '报名成功',
				icon: 'success'
			})
			setTimeout(() => {
				// 跳转到报名成功页面，传递真实岗位数据
				const successPageData = {
					company: jobInfo.value.company || jobInfo.value.customerName || '',
					position: jobInfo.value.position || '',
					salary: jobInfo.value.salary || '',
					address: jobInfo.value.address || '',
					detailAddress: jobInfo.value.detailAddress || '',
					arrivalMethod: '自行到厂',
					hireRecruitUseId: jobInfo.value.hireRecruitUseId || '',
					hireRecruitUseEntryId: jobInfo.value.hireRecruitUseEntryId || '',
					createdAt: Date.now()
				}
				
				// 将数据编码后传递给成功页面
				const encodedData = encodeURIComponent(JSON.stringify(successPageData))
				uni.navigateTo({
					url: `/pages/registration-success/registration-success?data=${encodedData}`
				})
			}, 1000)
		}
		
	}).catch((err)=>{
		console.error('提交报名失败:', err)
		uni.hideLoading()
		
		// 获取错误信息
		let errorMessage = '提交失败'
		if (err && err.message) {
			errorMessage = err.message
		} else if (err && err.errMsg) {
			errorMessage = err.errMsg
		} else if (err && typeof err === 'string') {
			errorMessage = err
		}
		
		// 弹窗显示错误信息，并提供确认按钮
		uni.showModal({
			title: '提交失败',
			content: errorMessage,
			showCancel: false,
			confirmText: '确定',
			success: (res) => {
				if (res.confirm) {
					// 用户点击确定后的处理逻辑
					console.log('用户确认了错误信息')
				}
			}
		})
	})
}

const getLocation = () => {
	uni.getLocation({
		type: 'gcj02',
		success: (res) => {
			console.log('获取位置成功:', res)
			// 保存用户位置
			userLocation.value = {
				longitude: res.longitude,
				latitude: res.latitude
			}
			
			// 设置地图标记点
			setMapMarkers()
			
			// 显示地图
			showMap.value = true
			
			uni.showToast({
				title: '位置获取成功',
				icon: 'success'
			})
		},
		fail: (err) => {
			console.log('获取位置失败:', err)
			uni.showToast({
				title: '位置获取失败',
				icon: 'error'
			})
		}
	})
}

// 设置地图标记点和路线
const setMapMarkers = () => {
	// 用户位置标记点
	const userMarker = {
		id: 1,
		longitude: userLocation.value.longitude,
		latitude: userLocation.value.latitude,
		title: '我的位置',
		iconPath: '/static/icon/location-user.png', // 用户位置图标
		width: 32,
		height: 32
	}
	
	// 企业位置标记点（这里使用岗位地址，实际应该从接口获取企业坐标）
	const companyMarker = {
		id: 2,
		longitude: userLocation.value.longitude + 0.01, // 临时偏移，实际应该使用企业真实坐标
		latitude: userLocation.value.latitude + 0.01,
		title: jobInfo.value.customerName || '企业位置',
		iconPath: '/static/icon/location-company.png', // 企业位置图标
		width: 32,
		height: 32
	}
	
	mapMarkers.value = [userMarker, companyMarker]
	
	// 设置路线（这里使用直线，实际应该调用路线规划API）
	mapPolyline.value = [{
		points: [
			{ longitude: userLocation.value.longitude, latitude: userLocation.value.latitude },
			{ longitude: companyMarker.longitude, latitude: companyMarker.latitude }
		],
		color: '#FF6B35',
		width: 4,
		arrowLine: true
	}]
}

// 打开导航规划路线页面
const openNavigation = () => {
	// 检查是否有企业位置信息
	if (!jobInfo.value.address && !jobInfo.value.detailAddress) {
		uni.showToast({
			title: '暂无企业地址信息',
			icon: 'none'
		})
		return
	}
	
	// 构建企业地址
	const companyAddress = jobInfo.value.detailAddress || jobInfo.value.address || ''
	const companyName = jobInfo.value.customerName || jobInfo.value.company || '企业位置'
	
	// 使用微信小程序的导航接口
	uni.openLocation({
		latitude: userLocation.value.latitude + 0.01, // 使用企业坐标
		longitude: userLocation.value.longitude + 0.01,
		name: companyName,
		address: companyAddress,
		scale: 15,
		success: () => {
			console.log('导航页面打开成功')
		},
		fail: (err) => {
			console.error('打开导航失败:', err)
			// 如果openLocation失败，尝试使用chooseLocation
			uni.showModal({
				title: '导航提示',
				content: '是否使用地图选择位置进行导航？',
				success: (res) => {
					if (res.confirm) {
						chooseLocationForNavigation()
					}
				}
			})
		}
	})
}

// 选择位置进行导航（备用方案）
const chooseLocationForNavigation = () => {
	uni.chooseLocation({
		success: (res) => {
			console.log('选择位置成功:', res)
			// 更新企业位置信息
			const companyMarker = {
				id: 2,
				longitude: res.longitude,
				latitude: res.latitude,
				title: res.name || '企业位置',
				iconPath: '/static/icon/location-company.png',
				width: 32,
		height: 32
			}
			
			// 更新标记点
			mapMarkers.value[1] = companyMarker
			
			// 更新路线
			mapPolyline.value = [{
				points: [
					{ longitude: userLocation.value.longitude, latitude: userLocation.value.latitude },
					{ longitude: res.longitude, latitude: res.latitude }
				],
				color: '#FF6B35',
				width: 4,
				arrowLine: true
			}]
			
			// 打开导航
			uni.openLocation({
				latitude: res.latitude,
				longitude: res.longitude,
				name: res.name || '企业位置',
				address: res.address || '',
				scale: 15
			})
		},
		fail: (err) => {
			console.error('选择位置失败:', err)
			uni.showToast({
				title: '选择位置失败',
				icon: 'none'
			})
		}
	})
}
</script>

<style lang="scss" scoped>
.job-application {
	min-height: 100vh;
	background-color: #F5F5F5;
	padding-bottom: 120rpx;
	padding-top: 0rpx; // 添加顶部边距，避免被导航栏遮挡
}

.step-indicator {
	background-color: #FFFFFF;
	padding: 40rpx 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20rpx;
	margin-top: 0; // 移除顶部边距，因为页面已经有了padding-top
}

.step-item {
	display: flex;
	align-items: center;
	position: relative;
}

.step-number {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background-color: #DDDDDD;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	font-weight: 500;
	margin-right: 16rpx;
}

.step-item.active .step-number {
	background-color: var(--u-primary);
}

.step-text {
	font-size: 25rpx;
	color: #999999;
	font-size: 23rpx;
}

.step-item.active .step-text {
	color: #333333;
}

.step-line {
	width: 120rpx;
	height: 4rpx;
	background-color: #DDDDDD;
	margin: 0 40rpx;
}

.step-line.active {
	background-color: var(--u-primary);
}

// 第一步样式
.job-details-card {
	background-color: #FFFFFF;
	margin: 0 20rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
	
	background: linear-gradient(var(--u-primary-plain-active), #fff 100rpx);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	
}

.card-title {
	display: flex;
	align-items: center;
	.card-title-img{
		width: 140rpx;
		height: 28rpx;
	}
}

.title-orange {
	font-size: 32rpx;
	font-weight: 500;
	color: #FF9800;
	margin-right: 10rpx;
}

.title-black {
	font-size: 32rpx;
	font-weight: 500;
	color: #333333;
}

.view-details {
	display: flex;
	align-items: center;
}

.view-text {
	font-size: 28rpx;
	color: #999999;
	margin-right: 10rpx;
}

.job-info-list {
	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.info-label {
		font-size: 28rpx;
		color: #666666;
		width: 30%;
	}
	
	.info-value {
		font-size: 28rpx;
		color: #000;
		width: 70%;
		margin-left: 20rpx;
	}
}

.identity-section, .phone-section {
	background-color: #FFFFFF;
	margin: 0 20rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
}

.section-title {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.required {
	color: #FF0000;
	font-size: 28rpx;
	margin-right: 8rpx;
}

.title-text {
	font-size: 28rpx;
	color: #666666;
}

.upload-container {
	display: flex;
	gap: 20rpx;
}

.upload-item {
	flex: 1;
}

.upload-area {
	width: 100%;
	height: 300rpx;
	background: linear-gradient(135deg, #FFF5F0 0%, #FFF0E6 100%);
	border: 2rpx dashed var(--u-primary);
	border-radius: 16rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}

.upload-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.upload-text {
	font-size: 28rpx;
	color: var(--u-primary);
	margin-top: 20rpx;
}

.uploaded-image {
	width: 100%;
	height: 300rpx;
	border-radius: 16rpx;
}

.phone-form {
	.form-item {
		margin-bottom: 30rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.form-label {
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 16rpx;
		display: block;
	}
	
	.verification-input {
		display: flex;
		align-items: center;
	}
}

.agreement-section {
	background-color: #FFFFFF;
	margin: 0 20rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
}

.agreement-item {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
}

.agreement-text {
	font-size: 24rpx;
	color: #666666;
	margin-left: 16rpx;
	line-height: 1;
}

// 第二步样式
.recommendation-header {
	background-color: #FFFFFF;
	margin: 0 20rpx 20rpx;
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #EEEEEE;
}

.recommendation-left {
	flex: 1;
}

.recommendation-text {
	font-size: 24rpx;
	color: #999999;
}

.recommendation-right {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.change-method-text {
	font-size: 28rpx;
	color: #007AFF;
	cursor: pointer;
}

.shuttle-service-section {
	background-color: #FFFFFF;
	margin: 0 20rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
}

.shuttle-info-card {
	background-color: #FFF5F0;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.shuttle-header {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20rpx;
}

.shuttle-title-section {
	display: flex;
	align-items: center;
	margin-left: 20rpx;
}

.shuttle-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333333;
}

.shuttle-tags {
	display: flex;
	gap: 10rpx;
	margin-left: 20rpx;
}

.tag-item {
	background-color: #FFFFFF;
	border: 1rpx solid #00C853;
	border-radius: 8rpx;
	padding: 6rpx 12rpx;
}

.tag-text {
	font-size: 24rpx;
	color: #00C853;
}

.shuttle-description {
	.description-text {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.5;
	}
}

.store-selection-section {
	.section-title {
		margin-bottom: 20rpx;
	}
	
	.title-text {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
	}
	
	.filter-buttons {
		display: flex;
		margin-bottom: 30rpx;
		border-radius: 8rpx;
		overflow: hidden;
		border: 1rpx solid var(--u-primary);
	}
	
	.filter-btn {
		flex: 1;
		background-color: #FFFFFF;
		padding: 16rpx 20rpx;
		text-align: center;
		border: none;
		border-radius: 0;
	}
	
	.filter-btn:first-child {
		border-top-left-radius: 8rpx;
		border-bottom-left-radius: 8rpx;
	}
	
	.filter-btn:last-child {
		border-top-right-radius: 8rpx;
		border-bottom-right-radius: 8rpx;
	}
	
	.filter-btn.active {
		background-color: var(--u-primary);
	}
	
	.filter-btn.active .filter-text {
		color: #FFFFFF;
	}
	
	.filter-text {
		font-size: 28rpx;
		color: #666666;
	}
	
	.store-list {
		.store-item {
			display: flex;
			align-items: flex-start;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #EEEEEE;
			position: relative;
			
			&:last-child {
				border-bottom: none;
			}
		}
		
		.store-icon {
			margin-right: 20rpx;
			margin-top: 4rpx;
		}
		
		.store-info {
			flex: 1;
		}
		
		.store-name-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 8rpx;
		}
		
		.store-name {
			font-size: 28rpx;
			color: #333333;
			font-weight: 500;
		}
		
		.store-distance {
			font-size: 28rpx;
			color: var(--u-primary);
			font-weight: 500;
		}
		
		.store-navigation {
			margin-bottom: 8rpx;
		}
		
		.store-address {
			font-size: 24rpx;
			color: #666666;
			margin-bottom: 8rpx;
			line-height: 1.4;
		}
		
		.store-time {
			font-size: 24rpx;
			color: #999999;
		}
		
		.store-badge {
			position: absolute;
			bottom: 20rpx;
			right: 0;
			background-color: #FF0000;
			border-radius: 12rpx;
			padding: 4rpx 12rpx;
		}
		
		.badge-text {
			font-size: 20rpx;
			color: #FFFFFF;
		}
	}
}

.location-section {
	background-color: #FFFFFF;
	margin: 0 20rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
}

.arrival-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.arrival-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333333;
}

.arrival-method {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.change-system-link {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.change-system-text {
	font-size: 28rpx;
	color: #007AFF;
	cursor: pointer;
}

.self-arrival-info {
	margin-bottom: 20rpx;
}

.self-arrival-header {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.self-arrival-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333333;
	margin-left: 20rpx;
}

.self-arrival-description {
	.description-text {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.5;
	}
}

.company-time-info-card {
	background-color: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	width: 88%;
	margin: 0 auto;
}

/* 變更確認樣式 */
.change-confirm-section {
  background-color: #FFFFFF;
  margin: 0 20rpx 20rpx;
  border-radius: 16rpx;
  padding: 20rpx;
}

.change-title-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin: 10rpx 10rpx 20rpx 10rpx;
}

.change-badge {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  color: #fff;
}
.change-badge.original { /* 參考設計：原 使用中性灰 */
  background-color: #909399;
}
.change-badge.change { /* 參考設計：變 使用醒目橙 */
  background-color: #FF7F3E;
}
.change-title {
  font-size: 28rpx;
  color: #333;
}

.change-card {
  background-color: #FFFFFF;
  border: 1rpx solid #EDEDED;
  border-radius: 12rpx;
  margin: 0 10rpx 20rpx 10rpx;
  overflow: hidden; /* 讓圓角對內部灰底生效 */
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04);
}

.change-item {
  display: grid; /* 兩列表格布局 */
  grid-template-columns: 100rpx 1fr; /* 左欄縮短 */
  align-items: stretch;
  border-bottom: 1rpx solid #F0F0F0;
}
.change-item:last-child { border-bottom: none; }
.change-label {
  font-size: 26rpx;
  color: #666;
  background: #FAFAFA; /* 左欄灰底 */
  padding: 22rpx 20rpx;
  border-right: 1rpx solid #F0F0F0;
}
.change-value {
  font-size: 28rpx;
  color: #333;
  padding: 22rpx 22rpx;
}

/* 只針對第二張（變更後）卡片：左欄改為淺橘色並強調字色 */
.change-confirm-section .change-card:last-of-type .change-label {
  background: #FFF6F0;
}

.timeline-container {
	display: flex;
	position: relative;
}

.timeline-bar {
	position: relative;
	width: 40rpx;
	margin-right: 30rpx;
	flex-shrink: 0;
}

.timeline-line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2rpx;
	background-color: #DDDDDD;
	transform: translateX(-50%);
}

.timeline-dot {
	position: absolute;
	left: 50%;
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

.timeline-dot.green-dot {
	background-color: #00C853;
	top: 20rpx;
}

.timeline-dot.orange-dot {
	background-color: var(--u-primary);
	top: 260rpx;
}

.timeline-content {
	flex: 1;
}

.timeline-item {
	margin-bottom: 30rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.service-time-item {
	margin-bottom: 20rpx;
}

.company-info {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}

.company-label {
	font-size: 28rpx;
	color: #666666;
	margin-right: 10rpx;
}

.info-dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	margin-right: 10rpx;
	flex-shrink: 0;
}

.green-dot {
	background-color: #00C853;
}

.red-dot {
	background-color: #FF0000;
}

.company-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
}

.company-address {
	font-size: 24rpx;
	color: #666666;
	margin-bottom: 20rpx;
	line-height: 1.5;
}



.time-content {
	flex: 1;
}

.time-label {
	font-size: 28rpx;
	color: #666666;
	display: block;
	margin-bottom: 8rpx;
}



.time-value {
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
}

.time-details {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.time-item {
	font-size: 28rpx;
	color: #333333;
}

.location-info-card {
	background-color: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	margin-bottom: 20rpx;
}



.location-label {
	font-size: 28rpx;
	color: #666666;
	margin-bottom: 15rpx;
	display: block;
}

.location-auth-button {
	background-color: #f4f4f4;
	border-radius: 8rpx;
	padding: 24rpx 30rpx;
	display: flex;
	align-items: center;
	gap: 12rpx;
	width: 500rpx;
	margin-top: 15rpx;
}

.auth-text {
	font-size: 26rpx;
	color: var(--u-primary);
	font-weight: bold;
}

.confirm-section {
	background-color: #FFFFFF;
	margin: 0 20rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
}

.confirm-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333333;
	margin-bottom: 30rpx;
}

.confirm-content {
	.confirm-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.confirm-label {
		font-size: 28rpx;
		color: #666666;
	}
	
	.confirm-value {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
	}
}

 .bottom-button {
 	position: fixed;
 	bottom: 0;
 	left: 0;
 	right: 0;
 	background-color: #FFFFFF;
  padding: 20rpx 30rpx;
  /* iOS 安全區域適配 */
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
 	box-shadow: 0 -1rpx 10rpx rgba(0, 0, 0, 0.1);
 }
 
 .two-button-container {
 	display: flex;
 	align-items: center;
 	gap: 20rpx;
 }
.company-info-title{
	padding: 20rpx;
	font-size: 26rpx;
	color:#666;
	.company-info-title-flex{
		margin-top: 12rpx;
		display: flex;
		align-items: center;
		img{
			margin-top: 16rpx;
			margin-right: 16rpx;
		}
	}
	.company-info-title-tag{
		margin-top: 6rpx;
		font-weight: bold;
		color: #333;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 12rpx;
	}
}

/* 地图样式 */
.location-map {
	width: 100%;
	height: 400rpx;
	margin-top: 20rpx;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

/* 导航提示样式 */
.navigation-tip {
	text-align: center;
	margin-top: 16rpx;
	padding: 16rpx 24rpx;
	background-color: #F8F9FA;
	border-radius: 12rpx;
	border: 1rpx solid #E9ECEF;
}

.tip-text {
	font-size: 24rpx;
	color: #6C757D;
}

/* 自定义标签样式 */
.custom-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgb(16, 184, 195) 0%, rgb(20, 200, 210) 100%);
	color: #FFFFFF;
	font-size: 18rpx;
	font-weight: 400;
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(16, 184, 195, 0.3);
	position: relative;
	overflow: hidden;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.5s;
	}
	
	&:hover::before {
		left: 100%;
	}
}
</style> 